<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table 1</title>
    <style type="text/css">
        thead {color: green}
        tbody {color: blue; height: 50px}
        tfoot {color: red}
    </style>
</head>
<body>
    <!-- 发现 默认每个单元格都是等宽的 如果不是等宽就会使用最宽的那个-->
    <table border="1">
        <tr>
            <th>Heading New York</th>
            <th>Another Heading</th>
        </tr>
        <tr>
            <td>row 1,cell 1</td>
            <td>row 1,cell 2</td>
        </tr>
        <tr>
            <td>row 2,cell 1</td>
            <td>row 2,cell 2</td>
        </tr>
    </table>
    <!--注意：在一些浏览器中，没有内容的表格单元显示得不太好。
    如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框这个空的单元格的边框没有被显示出来。
    为了避免这种情况，
    在空单元格中添加一个空格占位符 &nbsp; ，就可以将边框显示出来。-->
    <table border="1">
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;</td>
            <!--<td></td>-->
            <td>row 2, cell 2</td>
        </tr>
    </table>

    <h4>垂直的表头：</h4>
    <table border="1">
        <tr>
            <th>姓名</th>
            <td>Bill Gates</td>
        </tr>
        <tr>
            <th>电话</th>
            <td>555 77 854</td>
        </tr>
        <tr>
            <th>电话</th>
            <td>555 77 855</td>
        </tr>
    </table>

    <h4>横跨两列的单元格:</h4>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th colspan="2">电话</th>
        </tr>
        <tr>
            <td>Bill Gates</td>
            <td>0755</td>
            <td>12336547</td>
        </tr>
    </table>
    <table border="1">
        <tr>
            <th>姓名</th>
            <td>Bill Gates</td>
        </tr>
        <tr>
            <th rowspan="2">电话</th>
            <td>0755</td>
        </tr>
        <tr>
            <td>2533699</td>
        </tr>
    </table>
    <!-- 下面测试表格内地标签 -->
    <h4>表格内的标签</h4>
    <table border="1">
        <tr>
            <td>
                <p>这是一个段落</p>
                <p>这是另外一个段落</p>
            </td>
            <td>这个单元格包含另外一个表格:
                <table border="1">
                    <tr>
                        <td>A</td>
                        <td>B</td>
                    </tr>
                    <tr>
                        <td>C</td>
                        <td>D</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>这个单元包含一个列表:
                <ul>
                    <li>苹果</li>
                    <li>香蕉</li>
                    <li>菠萝</li>
                </ul>
            </td>
            <td>HELLO DE LONG</td>
        </tr>
    </table>

    <h4>对比 有没有 cellpadding</h4>
    <h4>没有 cellpadding</h4>
    <table border="1">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
    </table>

    <!--  修改了对比  -->
    <h4>带有 cellpadding</h4>
    <table border="1" cellpadding="10">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
    </table>

    <h4> 带有 cellSpacing</h4>
    <table border="1" cellspacing="10">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
    </table>

    <!-- 当然我们可以指定每个 th的宽度 如果没有指定浏览器会自己计算一个
         如果我们设置了两个 会使用浏览器默认的
     -->
    <h4> 测试th 中的align 属性 </h4>
    <table width="400" border="1">
        <tr>
            <th align="left" width="200">消费项目....</th>
            <th align="right" width="100">一月月</th>
            <th align="right" width="100">二月</th>
        </tr>
        <tr>
            <!--<td align="left" width="100">衣服</td>-->
            <!--<td align="right" width="150">$241.10</td>-->
            <!--<td align="right" width="150">$50.20</td>-->
            <td align="left">衣服</td>
            <td align="right">$241.10</td>
            <td align="right">$50.20</td>
        </tr>
        <tr>
            <td align="left">化妆品</td>
            <td align="right">$30.00</td>
            <td align="right">$44.45</td>
        </tr>
        <tr>
            <td align="left">食物</td>
            <td align="right">$730.40</td>
            <td align="right">$650.00</td>
        </tr>
        <tr>
            <th align="left">总计</th>
            <th align="right">$1001.50</th>
            <th align="right">$744.65</th>
        </tr>
    </table>

    <!-- table 的frame 属性无法再IE 中正常显示-->
    <p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。chrome safari支持</p>
    <p>Table with frame="box":</p>
    <table frame="box">
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
    </table>

    <p>Table with frame="above":</p>
    <table frame="above">
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
    </table>

    <p>Table with frame="below":</p>
    <table frame="below">
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
    </table>

    <p>Table with frame="hsides":</p>
    <table frame="hsides">
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
    </table>

    <p>Table with frame="vsides":</p>
    <table frame="vsides">
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
    </table>

    <h4>单元背景:</h4>
    <table border="1">
        <tr>
            <td bgcolor="red">First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td background = "../images/bg.jpg" width="200" height="80">Second</td>
            <td>Row</td>
        </tr>
    </table>

    <h4>测试 caption 属性</h4>
    <table border="4">
        <caption>
            Monthly Saving  <!-- caption 会位于表格上方 -->
        </caption>
        <tr>
            <th>new</th>
            <th>time</th>
        </tr>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
    </table>

    <!--  实际上 这三个属性很少使用 因为 糟糕的 浏览器兼容性 -->
    <h4> 测试 thead tbody tfooter  </h4>
    <table border="1">
        <thead>
            <th>Month</th>
            <th>Savings</th>
        </thead>
        <tbody>
            <tr>
                <td>January</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>February</td>
                <td>$80</td>
            </tr>
            <tr>
                <td>January</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>February</td>
                <td>$80</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Sum</td>
                <td>$180</td>
            </tr>
        </tfoot>
    </table>

    <!-- COl 标签很有用  如需对全部列应用样式，<col> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。
您只能在 table 或 colgroup 元素中使用 <col> 标签。-->
    <!-- 所有主流浏览器都支持 <colgroup> 标签。

Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性。
 -->
    <h4>测试Col 标签</h4>
    <table width="100%" border="1">
        <colgroup align="left" span="2"></colgroup>
        <colgroup align="right" style="color: #0000ff;"></colgroup>
        <tr>
            <th>ISBN</th>
            <th>Title</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>3476896</td>
            <td>My first HTML</td>
            <td>$53</td>
        </tr>
    </table>

</body>
</html>






























